import React from 'react';
import Duanzi from './components/Duanzi';
import YiYan from './components/YiYan';
import Weather from './components/Weather';
//导入 css 文件
import "./App.css"
export default class App extends React.Component {

    state = {
        showDuanzi: false,
        showYiYan: false,
        showWeather: false
    }

    render() {
        //获取 state 中的属性
        let {showDuanzi, showYiYan, showWeather} = this.state;
        return <div >
            <button attr="showDuanzi" onClick={this.show}>段子</button>
            <button attr="showYiYan" onClick={this.show}>名言</button>
            <button attr="showWeather" onClick={this.show}>天气</button>
            <hr/>
            {showDuanzi && <Duanzi />}
            {showYiYan && <YiYan style={{width: '400px', height: '300px'}} />}
            {showWeather && <Weather />}
        </div>
    }

    show = (e) => {
        //获取类型
        let type = e.target.getAttribute('attr');
        //拼接数据
        let data = {};
        for(let i in this.state){
            if(i !== type){
                data[i] =  false;
            }else{
                data[i] = !this.state[type]
            }
        }
        console.log(data);
        //返回一个函数
        this.setState(data);
    }

    duanzi = () => {
        this.setState({
            showDuanzi: !this.state.showDuanzi
        })
    }
    yiyan = () => {
        this.setState({
            showYiYan: !this.state.showYiYan
        })
    }

    tianqi = () => {
        this.setState({
            showWeather: !this.state.showWeather
        })
    }


}